<template>
	<el-dialog title="历史服务表" :visible.sync="dialogVisible" width="1000px" @close="handleClose"
		:close-on-click-modal="false" append-to-body="true">
		<div slot="title" class="dialog-header-title">
			<i class="el-icon-edit-outline"></i>
			<span>历史服务字段</span>
		</div>

	
	<div class="smp-result smp_panel_1" style="margin-top: -10px;">
		<div class="smp_panel_header">
			<div class="smp_panel_pre"></div>
			<div class="smp_panel_title">基础信息</div>
		</div>
		<div class="smp-search smp_panel_body">
			
			<el-descriptions size="mini" :column="4" border>
				<el-descriptions-item label="交易名称">
					{{form.transName}}
				</el-descriptions-item>
				<el-descriptions-item label="交易码">
					{{form.transCode}}
				</el-descriptions-item>
				<el-descriptions-item label="系统名称">
					{{form.systemNo|getSystemName}}
				</el-descriptions-item>
				<el-descriptions-item label="系统编号">
					{{form.systemNo}}
				</el-descriptions-item>
				 <el-descriptions-item label="系统机构号">
					{{form.systemOrg}}
				</el-descriptions-item>
				
				<el-descriptions-item label="报文协议">
					{{form.msgAgreement}}
				</el-descriptions-item>
				<el-descriptions-item label="报文编码">
					{{form.msgCode|dictName("SMP0004")}}
				</el-descriptions-item>
				<el-descriptions-item label="http请求方法">
					{{form.httpMethed}}
				</el-descriptions-item>
				
				<el-descriptions-item label="服务编码">
					{{form.busCode}}
				</el-descriptions-item>
				<el-descriptions-item label="外部可见">
					{{form.outShow|dictName("SMP0015")}}
				</el-descriptions-item>
				
				<el-descriptions-item label="ESB地址">
					{{form.esbAddr|getESBEnvironment(that)}}
				</el-descriptions-item>
				
				<el-descriptions-item label="测试URL">
					{{form.testAddr}}
				</el-descriptions-item>
				
				<el-descriptions-item label="功能简介" :span="4">
					{{form.funIntr}}
				</el-descriptions-item>
				
			</el-descriptions>
			
			</div>
		</div>
		<div>
			
		<div class="smp-result smp_panel_1">
			<div class="smp_panel_header">
				<div class="smp_panel_pre"></div>
				<div class="smp_panel_title">服务字段</div>
			</div>
		<div class="smp-search smp_panel_body innerTabs_1">
			<el-tabs >
				<el-tab-pane label="请求字段">
			<el-table class="fieldList" :data="requestFieldList.slice((requestFieldCurrentPage-1)*requestFieldPageSize,requestFieldCurrentPage*requestFieldPageSize)"  size="mini"   stripe  style="width: 100%" v-if="list1show">
				<el-table-column prop="orderNumber" label="序号" align="center" width="60"></el-table-column>
				<el-table-column prop="fieldCode" label="字段代码" align="center"></el-table-column>
				<el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column prop="parentType" label="父节点" align="center"></el-table-column>
				
				<el-table-column prop="nodeType" label="节点类型" align="center"  width="80">
					 <template slot-scope="scope">
						{{scope.row.nodeType|dictName("SMP0017")}}
					</template> 
				</el-table-column>
				
				<el-table-column prop="fieldType" label="字段类型"  width="80"  align="center" >
					 <template slot-scope="scope">
						{{scope.row.fieldType|dictName("SMP0018")}}
					</template> 
				</el-table-column>
				
				<el-table-column prop="fieldLength" label="长度"  width="80"  align="center"></el-table-column>
				<el-table-column prop="fieldRequire" width="80" align="center" label="是否必输">
					<template slot-scope="scope">
						{{scope.row.fieldRequire|dictName("SMP0015")}}
					</template>
					
				</el-table-column>
				
				<el-table-column prop="struct" label="报文结构" align="center" >
					 <template slot-scope="scope">
						{{scope.row.struct|dictName("SMP0019")}}
					</template> 
				</el-table-column>
				<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述"></el-table-column>
				
			</el-table>
			<div class="smp-pagination" >
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="requestFieldPageSize" :page-sizes="[5,10,20]" :total="requestFieldList.length" :current-page="requestFieldCurrentPage" @current-change = "requestFieldCurrentChange" @size-change="requestFieldSizeChange">
					</el-pagination>
			</div>
			</el-tab-pane>
			
			<el-tab-pane label="响应字段">
			<el-table class="fieldList" :data="responseFieldList.slice((responseFieldCurrentPage-1)*responseFieldPageSize,responseFieldCurrentPage*responseFieldPageSize)"  size="mini"  stripe  style="width: 100%" v-if="list1show">
				
				<el-table-column prop="orderNumber" label="序号" align="center" width="60"></el-table-column>
				<el-table-column prop="fieldCode" label="字段代码" align="center"></el-table-column>
				<el-table-column prop="fieldName" label="字段名称" show-overflow-tooltip align="center"></el-table-column>
				<el-table-column prop="parentType" label="父节点" align="center"></el-table-column>
				
				<el-table-column prop="nodeType" label="节点类型" align="center"  width="80">
					 <template slot-scope="scope">
						{{scope.row.nodeType|dictName("SMP0017")}}
					</template> 
				</el-table-column>
				
				<el-table-column prop="fieldType" label="字段类型"  width="80"  align="center" >
					 <template slot-scope="scope">
						{{scope.row.fieldType|dictName("SMP0018")}}
					</template> 
				</el-table-column>
				
				<el-table-column prop="fieldLength" label="长度"  width="80"  align="center"></el-table-column>
				<el-table-column prop="fieldRequire" width="80" align="center" label="是否必输">
					<template slot-scope="scope">
						{{scope.row.fieldRequire|dictName("SMP0015")}}
					</template>
					
				</el-table-column>
				
				<el-table-column prop="struct" label="报文结构" align="center" >
					 <template slot-scope="scope">
						{{scope.row.struct|dictName("SMP0019")}}
					</template> 
				</el-table-column>
				<el-table-column prop="fieldEdsc" show-overflow-tooltip label="字段描述"></el-table-column>
				
			</el-table>
			<div class="smp-pagination" >
					<el-pagination background size="medium" layout="total,sizes,prev, pager, next,jumper" :page-size="responseFieldPageSize" :page-sizes="[5,10,20]" :total="responseFieldList.length" :current-page="responseFieldCurrentPage" @current-change = "responseFieldCurrentChange" @size-change="responseFieldSizeChange">
					</el-pagination>
				</div>
			</el-tab-pane>
			</el-tabs>
			</div>
			</div>
		
		</div>
		
					
	</el-dialog>
</template>

<script>
	"use strict";
	import {getHisFieldByServer} from '@/api/field.js';
	import {getEsbEnvironmentByEsbFlg} from '@/api/environment.js';
	export default {
		data() {
			return {
				esbEnvironmentList: [],
				that:this,
				index:0,
				type:'add',
				dialogVisible: false,
				list1show: true,
				requireTypeDisable:false,
				transCodeDisabled:false,
				
				requestFieldList:[],
				responseFieldList:[],
				//请求字段分页信息
				requestFieldCurrentPage:1,
				requestFieldPageSize:5,
				responseFieldCurrentPage:1,
				responseFieldPageSize:5,
				
				
				form: {
					 requireType:'01',
					 transName: '',
					 transCode: '',
					 systemNo: '',
					 systemOrg:'',
					 msgAgreement: '',
					 msgCode: '',
					 testAddr: '',
					 prodAddr: '',
					 esbAddr:'',
					 outShow:'01',
					 funIntr:'',
					 remark:'',
					 applyFieldList:[], 
				},
			};
		},
		components: {
			// addApplyField,
			// addServerView
		},
		created() {
			this.getEsbEnvironmentList();
		},
		
		filters: {
			getESBEnvironment: function(ip,that) {
			
				let esbEnvironment =  that.esbEnvironmentList.filter(item=>item.ip==ip)[0];
				return esbEnvironment.ip +"(" + that.dictName(esbEnvironment.esbFlg,'SMP0031') +")";
			}
		},
				
		methods: {
			getEsbEnvironmentList() {
				getEsbEnvironmentByEsbFlg({}).then(response => {
					this.esbEnvironmentList = response.data.extend;
				})
			},
						
			requestFieldCurrentChange(val){
				
				this.requestFieldCurrentPage = val
			},
			requestFieldSizeChange(val){
				this.requestFieldCurrentPage = 1
				this.requestFieldPageSize = val
			},
			
			responseFieldCurrentChange(val){
				this.responseFieldCurrentPage = val
			},
			responseFieldSizeChange(val){
				this.responseFieldCurrentPage = 1
				this.responseFieldPageSize = val
			},
			
			fetchProtocal(queryString,cb){
			var protocals = [{value:"socket/xml"},{value:"http/json"},{value:"http/soap"},{value:"https/json"},{value:"定长"},{value:"分隔符"},{value:"其他"}];
				
				var protocals1 =
				protocals1  = queryString? protocals.filter(item=>{
					return item.value.indexOf(queryString)>-1;
				}):protocals;
				cb(protocals1);
			},

			
			reset() {
				this.$refs["form"].resetFields();
				this.form.applyFieldList =[];
				
			},

			showDialog(systemNo) {
				
				 let system = this.$store.getters.getSystem(systemNo);
				  Object.assign(this.form,system);
				//  console.info(system)
				this.type='add';
				this.dialogVisible = true;
				this.form.requireType="01";
				this.requireTypeDisable = false;
				this.form.applyFieldList =[];
				this.transCodeDisabled = false;
			},
			
			showDialog2(row,index) {
				this.type='update';
				this.index = index;
				this.form = row;
				
				this.getServerView(row);
				// this.requestFieldList = this.form.applyFieldList.filter(item=>item.inOut=='01');
				// this.responseFieldList = this.form.applyFieldList.filter(item=>item.inOut=='02');
				this.dialogVisible = true;
				this.requireTypeDisable = true;
				this.transCodeDisabled = true;
			},
			
			closeDialog() {
				this.$refs["form"].resetFields();
				this.dialogVisible = false;
			},

			handleClose() {
				this.dialogVisible = false;
			},
			
			
			
			
			addApplyField(item) {
			
				this.form.applyFieldList.push(item);
			},
			
			
			
			delrole1(index, row) {
				this.form.applyFieldList.splice(index, 1);
			},

			typeChange(val){
				this.requireTypeDisable = true;
				if(val!="01"){
					this.$refs.addServerView.showDialog(this.form.systemNo);
				}
			},
			
			getServerView(row){
				//带出服务字段
				getHisFieldByServer({"serviceHisId":row.id}).then(response => {
					this.form.applyFieldList = response.data.extend.list
					
					this.requestFieldList = this.form.applyFieldList.filter(item=>item.inOut=='01');
					this.responseFieldList = this.form.applyFieldList.filter(item=>item.inOut=='02');
					
					this.transCodeDisabled = true;
				}).catch(error => {
					console.info("失败");
					console.info(error.message);
				});
				
				
			},
			
		},

	}
</script>

<style scoped>
	.detailsTitle {
		color: black;
		font-size: 18px;
		text-align: left;
		margin-top: 10px;
		margin-left: 15px;
		margin-bottom: 10PX;
		border-left: 3px solid #090;
		line-height: 24px;
		padding-left: 10px;
		color: #57595d;
	}
	
	.fieldList{
		min-height: 100px;
		max-height: 400px;
		overflow: auto;
	}
</style>
